<template>
  <div class="collect">
    <div class="item header">
      <div class="title">综合班报表</div>
      <div class="content">
        <div>油站：李哈哈油站</div>
        <div>班次：甲班</div>
        <div>时间：2021.11.10 10:28:24 - 2021.11.11 10:28:24</div>
        <div>打印时间：2021-10-27 11:33:30</div>
      </div>
    </div>
    <div class="item">
      <div class="title">油机统计班报</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <af-table-column prop="q1" label="枪号" align="left">
          </af-table-column>
          <af-table-column prop="q2" label="油罐" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="班前泵码" align="left">
          </af-table-column>
          <af-table-column prop="q4" label="班后泵码" align="left">
          </af-table-column>
          <af-table-column prop="q5" label="泵码差" align="left">
          </af-table-column>
          <af-table-column prop="q5" label="回罐" align="left">
          </af-table-column>
          <af-table-column prop="q5" label="实付量" align="left">
          </af-table-column>
        </el-table>
      </div>
    </div>
    <div class="item">
      <div class="title">销售金额统计</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <af-table-column prop="q1" label="支付方式" align="left">
          </af-table-column>
          <af-table-column prop="q2" label="国V柴0#" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="国V92#" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="油品合计" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="便利店" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="汽车用品" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="小计" align="left">
          </af-table-column>
        </el-table>
      </div>
    </div>
    <div class="item">
      <div class="title">实付金额统计</div>

      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <af-table-column prop="q1" label="支付方式" align="left">
          </af-table-column>
          <af-table-column prop="q2" label="国V柴0#" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="国V92#" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="油品合计" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="便利店" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="汽车用品" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="小计" align="left">
          </af-table-column>
        </el-table>
      </div>
    </div>
    <div class="item">
      <div class="title">油罐进销存报表</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <af-table-column prop="q1" label="罐号" align="left">
          </af-table-column>
          <af-table-column prop="q2" label="油品" align="left">
          </af-table-column>
          <af-table-column prop="q3" label="接班油量(L)" align="left">
          </af-table-column>
          <af-table-column prop="q4" label="进油量(L)" align="left">
          </af-table-column>
          <af-table-column prop="q5" label="实际库存(L)" align="left">
          </af-table-column>
          <af-table-column prop="q5" label="损溢量(L)" align="left">
          </af-table-column>
        </el-table>
      </div>
    </div>
    <div class="last">
      <div>当班员工签字：________</div>
      <div>综管员签字：________</div>
      <div>站经理签字：________</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table1: [
        {
          title1: "油机出油合计应收：",
          amount1: "hah",
          title2: "短款：",
          amount2: "3333",
        },
        {
          title1: "加油实收合计金额：",
          amount1: "hah",
          title2: "优惠券合计金额：",
          amount2: "3333",
        },
        {
          title1: "充值实收合计金额：",
          amount1: "hah",
          title2: "立减合计金额：",
          amount2: "3333",
        },
        {
          title1: "客户退款合计金额：",
          amount1: "hah",
          title2: "回罐合计金额：",
          amount2: "3333",
        },
        {
          title1: "",
          amount1: "",
          title2: "优惠合计金额：",
          amount2: "3333",
        },
      ],
      table2: [
        {
          q1: "11",
          q2: "12",
          q3: "13",
          q4: "14",
          q5: "15",
        },
      ],
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addclass(row) {
      console.log(row);
      if (row.columnIndex % 2 === 0) return "cellcss";
    },
  },
};
</script>
<style lang="scss">
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;
  .el-button {
    margin: 0 5px 0 0;
  }
}
// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;
  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }
  .el-button--cyan {
    margin-left: 20px;
  }
}
::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}
::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}
.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  .item {
    margin-top: 10px;
    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
    .content {
      text-align: center;
    }
  }
  .header {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .cellcss {
    background-color: #f6f6f6;
  }
  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}
</style>
